<template>
	<view class="product-page">
		<image class="product-image" :src="product.image"></image>
		<text class="product-title">{{ product.title }}</text>

		<!-- 这是一个表单，用于提交订单 -->
		<form @submit="onFormSubmit">
			<input name="quantity" value="1" />
			<!-- 更多表单项... -->

			<!-- 底部操作栏 -->
			<view class="bottom-bar" @click="parentClickHandler">
				<!-- 1. 联系客服按钮 -->
				<button
					class="bar-btn"
					size="mini"
					open-type="contact"
					:session-from="`product_${product.id}`"
					:send-message-title="product.title"
					:send-message-path="`/pages/product/detail?id=${product.id}`"
					:send-message-img="product.image"
					@contact="onContact"
					hover-stop-propagation="true"
				>
					客服
				</button>

				<!-- 2. 分享按钮 -->
				<button class="bar-btn" size="mini" open-type="share">分享</button>

				<!-- 3. 提交订单按钮 -->
				<button class="submit-btn" type="warn" form-type="submit" :hover-start-time="50" :hover-stay-time="100">立即购买</button>
			</view>
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			product: {
				id: 'p001',
				title: 'uni-app 从入门到弃坑（精装版）',
				image: '/static/user.webp'
			}
		};
	},
	// 2. 只有定义了这个，open-type="share" 的按钮才会生效
	onShareAppMessage(res) {
		if (res.from === 'button') {
			console.log('用户通过按钮点击分享');
		}
		return {
			title: `快来看看这个好东西：${this.product.title}`,
			path: `/pages/product/detail?id=${this.product.id}`,
			imageUrl: this.product.image
		};
	},
	methods: {
		// 1. 联系客服的回调
		onContact(e) {
			console.log('进入客服会话的路径:', e.detail.path);
			console.log('携带的参数:', e.detail.query);
		},
		// 3. 表单提交的事件
		onFormSubmit(e) {
			console.log('表单已提交，购买数量:', e.detail.value.quantity);
			uni.showLoading({ title: '正在创建订单...' });
			// 执行后续的下单逻辑
		},
		parentClickHandler() {
			console.log('父级容器的点击事件触发了！');
		}
	}
};
</script>
